<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core">

<h:head>

	<!--
		JavaScript can be used as normal. 
	 -->	

	<script>
		function checkName(form) {
			var name = form[form.id + ":name"].value; // This id was definied below
			if (name.length == 1)
				alert("Come on! That's not really a name!");
			else
				form.submit();
		}
	</script>
</h:head>
<h:body>

	<h:messages />

	<h:form>
		<!-- Simple layout possibilities -->
		<h:panelGrid columns="2">	
			<h:outputLabel value="Please enter your Name:" />
			<h:inputText value="#{user.name}" id="name" /> <!-- Use id when you want to refer to it later (see JS code) -->

			<h:outputText value="Salutation:" />
			<h:selectOneMenu value="#{user.salutation}">	<!-- Simple drop down list -->
				<f:selectItem itemValue="Ms." itemLabel="Ms." />
				<f:selectItem itemValue="Mr." itemLabel="Mr." />
			</h:selectOneMenu>

			<h:outputText value="What languages do you speak?" />
			<h:selectManyListbox value="#{user.spokenLanguageCodes}"> <!-- Selection with items provided by a managed bean -->
				<f:selectItems value="#{user.languages}" var="i"
					itemLabel="#{i.name}" itemValue="#{i.code}"></f:selectItems> <!-- Define the representation and code when not using SelectItem object -->
			</h:selectManyListbox>

			<h:panelGroup />
			<h:commandButton type="button" value="Submit"
				onclick="checkName(this.form)" /> <!-- Use type button, to prevent form submit (will be done in JS code) -->
		</h:panelGrid>
	</h:form>

	<ui:fragment rendered="#{user.nameDefined}"> <!-- Use fragment to group elements together (for the rendered attribute) -->
		<h:outputText value="Hello #{user.salutation} #{user.name}!" />
		<br />
		Spoken languages are: 
		<ul>
			<ui:repeat value="#{user.spokenLanguageCodes}" var="l"> <!-- Simple example of a repeat -->
				<li><h:outputText value="#{l}" /></li>
			</ui:repeat>
		</ul>
		<br />
	</ui:fragment>

	<h:graphicImage value="jsf.png" width="200"></h:graphicImage>
	<br />

	<!-- Simple example with text parameters. May also use inline CSS style attributes -->
	<h:outputFormat value="We are running in project stage: {0} " style="font-size:10px">
		<f:param value="#{facesContext.application.projectStage}" />
	</h:outputFormat>

	<ui:debug /> <!-- Use Shift/Ctrl-D  to show debug info -->
</h:body>

</html>